<!-- Copyright (c) 2022 渝州大数据实验室
 *
 * Lanius is licensed under Mulan PSL v2.
 * You can use this software according to the terms and conditions of the Mulan PSL v2.
 * You may obtain a copy of Mulan PSL v2 at:
 *
 *     http://license.coscl.org.cn/MulanPSL2
 *
 * THIS SOFTWARE IS PROVIDED ON AN "AS IS" BASIS, WITHOUT WARRANTIES OF ANY KIND, EITHER EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO NON-INFRINGEMENT, MERCHANTABILITY OR FIT FOR A PARTICULAR PURPOSE.
 * See the Mulan PSL v2 for more details.
-->
<!-- 
* @desc:用户管理列表详情组件
* @fileName:UserDetails.vue
* @author:chenxiaofeng@yzbdl.ac.cn
* @date:2022-4-7
!-->
<script setup lang="ts">
import { ElMessageBox } from "element-plus";

const props = defineProps({
  tableData: Array as any,
  // 数据列表加载动画
  isListLoading: {
    type: Boolean,
    default: false,
  },
  // 删除方法
  delUser: Function as any,
});

/**
 * 点击删除
 * @param currentInfo 当前行数据
 * @reture viod
 */
const onDel = (currentInfo: any) => {
  ElMessageBox.confirm("确定删除 " + currentInfo.username + " ?", "删除提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消操作",
    type: "warning",
  })
    .then(() => {
      props.delUser(currentInfo.id);
    })
    .catch(() => {});
};
</script>

<template>
  <div class="page-details">
    <el-table
      v-loading="props.isListLoading"
      :data="props.tableData"
      stripe
      style="width: 100%"
    >
      <el-table-column prop="id" label="ID" />
      <el-table-column prop="username" label="用户账号" />
      <el-table-column prop="createTime" label="创建时间" />
      <el-table-column prop="operation" label="操作">
        <template #default="scope">
          <span class="operation"
            ><el-tooltip content="删除" placement="top" effect="customized"
              ><img
                @click="onDel(scope.row)"
                src="@/assets/img/common/delete.png" /></el-tooltip
          ></span>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<style>
.el-popper.is-customized {
  /* Set padding to ensure the height is 32px */
  padding: 6px 12px;
  background-color: rgba(106, 106, 106, 1);
  color: #fff;
}

.el-popper.is-customized .el-popper__arrow::before {
  background-color: rgba(106, 106, 106, 1);
  right: 0;
}
</style>
<style scoped lang="scss">
.operation {
  padding: 0 5px;
  img {
    width: 16px;
    height: 16px;
    cursor: pointer;
  }
}
.page-details {
  margin-top: 15px;
}

.el-table {
  :deep(th) {
    background-color: #fafafa;
    height: 40px;
    line-height: 40px;
    padding: 0;
    border-bottom: 0 !important;
    &:first-child {
      padding-left: 40px;
    }
  }
  :deep(td) {
    height: 40px;
    line-height: 40px;
    padding: 0;
    border-bottom: 0 !important;
    &:first-child {
      padding-left: 40px;
    }
  }
  :deep(.el-table__row--striped) {
    td {
      background-color: rgba($color: #f6f6f6, $alpha: 0.56) !important;
    }
  }
  :deep(.el-table__inner-wrapper) {
    &::before {
      height: 0;
    }
  }
}
</style>
